<template>
    <el-container>
        <!-- 头部 -->
        <el-header>
            <div><span>密淘后台管理系统</span></div>
            <el-button type="info" @click="loginOut">退出</el-button>
        </el-header>
        <!-- 内容 -->
        <el-container>
            <!-- 左边菜单 -->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="toggle-button" @click="toggleCollapse">|||</div>
                <el-menu background-color="#333744" text-color="#fff" active-text-color="#409BFF" unique-opened
                    :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">

                    <el-submenu :index="item.id + ''" v-for="(item, index) in menuList" :key="index">
                        <template slot="title">
                            <i :class=item.icon style="margin-right: 5px;"></i>
                            <span>{{ item.authName }}</span>
                        </template>
                        <el-menu-item :index="item1.path + ''" v-for="(item1, index1) in item.children" :key="index1"
                            @click="savaNavState(item1.path)">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{ item1.authName }}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>
            <!-- 右边内容 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>



<script>
import { removeToken } from '../utils/storage'
export default {
    data() {
        return {
            //菜单列表
            menuList: [
                {
                    id: 1,
                    authName: "用户管理",
                    icon: 'iconfont icon-yonghuguanli',
                    children: [
                        {
                            authName: "用户列表",
                            path: '/user'
                        }
                    ]
                },
                {
                    id: 2,
                    authName: "商品管理",
                    icon: 'iconfont icon-shangpinguanli',
                    children: [
                        {
                            authName: "分类管理",
                            path: '/type'
                        },
                        {
                            authName: "列表管理",
                            path: '/goodsList'
                        }
                    ]
                },
                {
                    id: 3,
                    authName: "订单管理",
                    icon: 'iconfont icon-dingdanguanlixuanzhong',
                    children: [
                        {
                            authName: "订单列表",
                            path: '/order'
                        }
                    ]
                },
                // {
                //     id: 4,
                //     authName: "轮播图管理",
                //     icon: 'iconfont icon-yonghuguanli',
                //     children: [
                //         {
                //             authName: "二级菜单",
                //             path: '/users'
                //         }
                //     ]
                // }
            ],
            //是否折叠
            isCollapse: false,
            //别激活的链接地址
            activePath: ''

        }
    },
    methods: {
        //退出
        loginOut() {

            this.$confirm('确认执行此操作吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                removeToken()
                this.$router.push('/login')
            }).catch(() => {

            })
        },
        //点击按钮，切换菜单的折叠与展开
        toggleCollapse() {
            this.isCollapse = !this.isCollapse
        },
        //保存当前路径到会话当中,作用避免刷新后无法高亮显示对应的按钮
        savaNavState(activaPath) {
            window.sessionStorage.setItem('activePath', activaPath)
            this.activePath = activaPath
        }
    },
    created() {
        this.activePath = window.sessionStorage.getItem('activePath')
    }

}
</script>

<style scoped lang="less">
.el-container {
    height: 100%;

    .el-header {
        background-color: #373d41;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 20px;

        div {
            display: flex;
            justify-content: center;
            align-items: center;

        }
    }

    .el-container {
        .el-aside {
            background-color: #333744;
            overflow: hidden;

            .toggle-button {
                background-color: #4a5064;
                font-size: 10px;
                text-align: center;
                color: #fff;
                list-style: 24px;
                letter-spacing: 0.2em;
                cursor: pointer;
                padding: 10px 0;
            }

            .el-menu {
                border: none;
            }
        }

        .el-main {
            background-color: #EAEDF1;
        }
    }
}
</style>